<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>员工管理系统</title>
    <link rel="stylesheet" href="/layui-v2.10.0-rc.5/layui/css/layui.css" />
    <style>
      .layui-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: url("https://example.com/background.jpg") no-repeat center
          center/cover;
        background-blend-mode: overlay;
      }
      .login-box {
        background: rgba(255, 255, 255, 0.8);
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
      }
      .layui-form-item label {
        width: 80px;
        text-align: right;
        padding-right: 10px;
      }
    </style>
  </head>
  <body>
    <div class="layui-container">
      <div class="login-box">
        <div style="text-align: center; margin: 20px">
          <h1>员工管理系统</h1>
        </div>

        <form class="layui-form" name="loginForm">
          <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="account"
                required
                lay-verify="required"
                placeholder="请输入用户名"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
              <input
                type="password"
                name="password"
                required
                lay-verify="required"
                placeholder="请输入密码"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn" lay-submit lay-filter="loginForm">
                登录
              </button>
              <button type="reset" class="layui-btn layui-btn-primary">
                重置
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <script src="/jquery/jquery-3.0.0.min.js"></script>
    <script src="/layui-v2.10.0-rc.5/layui/layui.js"></script>
    <script src="/js/base.js"></script>
    <script>
      layui.use(["form", "layer"], function () {
        var form = layui.form;
        var layer = layui.layer;

        // 表单验证规则
        form.verify({
          required: function (value) {
            if (!value.trim()) return "此字段不能为空";
          },
        });

        // 监听表单提交
        form.on("submit(loginForm)", function (data) {
          console.log(data.field);
          $.ajax({
            url: baseUrl + "/user/login",
            type: "POST",
            data: data.field,
            success: function (res) {
              if (res.code === "0") {
                layer.msg("登录成功", { icon: 1 });
                localStorage.setItem("token", res.data);
                setTimeout(function () {
                  window.location.href = "/index.html";
                }, 1500);
              } else {
                layer.msg("登录失败", { icon: 2 });
              }
            },
            error: function () {
              layer.msg("请求失败，请稍后重试", { icon: 2 });
            },
          });
          return false;
        });
      });
    </script>
  </body>
</html>
